<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="600px"
    :before-close="closeForm"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
  >
    <el-form ref="appMsgEdit" label-width="120px" :model="appMsg" :rules="rules">
      <el-form-item label="展示类型" prop="DataType">
        <el-select v-model="appMsg.DataType" placeholder="展示类型">
          <el-option label="自定义" :value="0" />
          <el-option label="表单" :value="1" />
          <el-option label="审批字段" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="展示文本" prop="Label">
        <el-input
          v-model="appMsg.Label"
          maxlength="50"
          placeholder="展示文本"
        />
      </el-form-item>
      <template v-if="appMsg.DataType === 1">
        <el-form-item label="选择字段" prop="ColId">
          <formColChiose v-model="appMsg.ColId" :label.sync="appMsg.ColName" :form-id="[formId]" />
        </el-form-item>
        <el-form-item label="筛选方案名" prop="Keywords">
          <el-input
            v-model="appMsg.Keywords"
            maxlength="20"
            placeholder="筛选方案名"
          />
        </el-form-item>
      </template>
      <el-form-item v-else-if="appMsg.DataType === 0" label="内容" prop="Value">
        <el-input
          v-model="appMsg.Value"
          maxlength="50"
          placeholder="内容"
        />
      </el-form-item>
      <el-form-item v-else-if="appMsg.DataType === 2" label="审批字段" prop="Value">
        <el-select v-model="appMsg.Value" placeholder="审批字段">
          <el-option label="节点名" value="NodeName" />
          <el-option label="应用名" value="AppName" />
          <el-option label="审核时间" value="EndTime" />
          <el-option label="审批方式" value="AuditType" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否整行展示" prop="IsRow">
        <el-switch
          v-model="appMsg.IsRow"
        />
      </el-form-item>
      <el-form-item label="是否标红" prop="IsRed">
        <el-switch
          v-model="appMsg.IsRed"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { DictItemDic } from '@/flow/config/flowConfig'
import formColChiose from '@/customForm/components/form/formColChiose.vue'

export default {
  components: {
    formColChiose
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    source: {
      type: Object,
      default: null
    },
    formId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '新增流程应用',
      auditDic: {
        NodeName: '节点名',
        AppName: '应用名',
        EndTime: '审核时间',
        AuditType: '审批方式'
      },
      appMsg: {
        Label: null,
        DataType: null,
        Value: null,
        ColId: null,
        Keywords: null,
        IsRow: false,
        IsRed: false,
        Show: null
      },
      id: null,
      rules: {
        Label: [
          {
            required: true,
            message: '展示文本不能为空！',
            trigger: 'blur'
          }
        ],
        DataType: [
          {
            required: true,
            message: '展示类型不能为空！',
            trigger: 'blur'
          }
        ],
        ColId: [
          {
            required: true,
            message: '请选择表单字段',
            trigger: 'blur'
          }
        ],
        Value: [
          {
            required: true,
            message: '内容不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    saveMsg() {
      const data = {
        Label: this.appMsg.Label,
        DataType: this.appMsg.DataType,
        Value: this.appMsg.Value,
        ColId: this.appMsg.ColId,
        Keywords: this.appMsg.Keywords,
        IsRow: this.appMsg.IsRow,
        IsRed: this.appMsg.IsRed,
        Show: null
      }
      if (this.appMsg.DataType === 1) {
        data.Show = '显示表单字段：' + this.appMsg.ColName
      } else if (this.appMsg.DataType === 2) {
        data.Show = '显示审批字段：' + this.auditDic[this.appMsg.Value]
      }
      this.$emit('save', this.id, data)
      this.$emit('update:visible', false)
    },
    save() {
      this.$refs['appMsgEdit'].validate((valid) => {
        if (valid) {
          this.saveMsg()
        } else {
          return false
        }
      })
    },
    reset() {
      if (this.source == null) {
        this.title = '新增消息模版定义'
        this.id = null
        this.appMsg = {
          Label: null,
          DataType: null,
          Value: null,
          ColId: null,
          Keywords: null,
          ColName: null,
          IsRow: false,
          IsRed: false,
          Show: null
        }
      } else {
        this.id = this.source.id
        this.appMsg = {
          Label: this.source.Label,
          DataType: this.source.DataType,
          Value: this.source.Value,
          ColName: null,
          ColId: this.source.ColId,
          Keywords: this.source.Keywords,
          IsRow: this.source.IsRow,
          IsRed: this.source.IsRed,
          Show: this.source.Show
        }
        this.title = '编辑消息模版定义'
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
